<template>
  <div class="jlszbox">
    <div class="jlszboxleft">
      <!-- 背景 -->
      <img src="@/images/jlszbox.png" alt="" class="jlszbjimg" />
      <!-- 表格列表 -->
      <div class="liebox beautifulScroll">
        <div
          class="lieitem"
          :ref="'lbs' + item.id"
          :class="{
            lieitems: item.id % 2 === 0,
            lieitemac: mklbid === item.id
          }"
          v-for="item in mklbdata"
          :key="item.id"
          @click="mklbfn(item.id)"
        >
          <div class="lieitemid">{{ item.id }}</div>
          <div class="lieitemname">{{ item.name }}</div>
        </div>
      </div>
      <!-- 表格数据部署 -->
      <div class="lbkv" ref="kv">{{ kv }}</div>
    </div>
    <div class="jlszboxright">
      <!-- 背景 -->
      <img src="@/images/jlszbox1.png" alt="" class="jlszbjimg1" />
      <!-- 输入框 -->
      <el-input
        v-for="item in mkroidata"
        :key="item"
        v-model="mkroi[item]"
        :ref="'mkroi' + item"
        placeholder="输入"
        :class="[
          'mkroi1',
          'mkroi' + item,
          { 'roi-error': mkroiError[item - 1] }
        ]"
        @focus="focusfn(item)"
      ></el-input>

      <!-- <img
        src="@/images/jlszbox2.png"
        alt=""
        class="jlszbjimg1"
        v-if="id == 2"
      />
      <img
        src="@/images/jlszbox3.png"
        alt=""
        class="jlszbjimg1"
        v-if="id == 3"
      />
      <img
        src="@/images/jlszbox4.png"
        alt=""
        class="jlszbjimg1"
        v-if="id == 4"
      />
      <img
        src="@/images/jlszbox5.png"
        alt=""
        class="jlszbjimg1"
        v-if="id == 5"
      /> -->
      <div class="tool dgjtoolqdss" @click="mkcheckRoi">
        <img src="@/images/qds.png" alt="" class="normal" />
        <img src="@/images/qdsac.png" alt="" class="active" />
      </div>
    </div>
    <!-- 跳过 -->
    <div class="tool tigbox" @click="tgfn" v-show="tgshow">
      <img src="@/images/tg.png" alt="" class="normal" />
      <img src="@/images/tgac.png" alt="" class="active" />
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      mkroiError: [false, false, false, false, false, false, false, false],
      mkroiErrorCount: 0,
      mkroiAnswer: [
        60.13, 60.15, 60.12, 60.13, 0.22, 80.26, 80.22, 80.17, 80.22, 0.27,
        100.8, 100.27, 100.34, 100.47, 0.47, 120.19, 119.87, 120.01, 120.02,
        0.02, 60.28, 60.22, 60.21, 60.24, 0.39, 80.09, 80.11, 80.24, 80.15,
        0.18, 100.22, 100.28, 100.22, 100.24, 0.24, 120.55, 120.68, 120.74,
        120.66, 0.55
      ],
      mkroidata: [
        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
        21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38,
        39, 40
      ],
      mkroi: {},
      mklbdata: [
        {
          id: 1,
          name: '大焦点模式60KV-1'
        },
        {
          id: 2,
          name: '大焦点模式60KV-2'
        },
        {
          id: 3,
          name: '大焦点模式60KV-3'
        },
        {
          id: 4,
          name: '大焦点模式80KV-1'
        },
        {
          id: 5,
          name: '大焦点模式80KV-2'
        },
        {
          id: 6,
          name: '大焦点模式80KV-3'
        },
        {
          id: 7,
          name: '大焦点模式100KV-1'
        },
        {
          id: 8,
          name: '大焦点模式100KV-2'
        },
        {
          id: 9,
          name: '大焦点模式100KV-3'
        },
        {
          id: 10,
          name: '大焦点模式120KV-1'
        },
        {
          id: 11,
          name: '大焦点模式120KV-2'
        },
        {
          id: 12,
          name: '大焦点模式120KV-3'
        },
        {
          id: 13,
          name: '小焦点模式60KV-1'
        },
        {
          id: 14,
          name: '小焦点模式60KV-2'
        },
        {
          id: 15,
          name: '小焦点模式60KV-3'
        },
        {
          id: 16,
          name: '小焦点模式80KV-1'
        },
        {
          id: 17,
          name: '小焦点模式80KV-2'
        },
        {
          id: 18,
          name: '小焦点模式80KV-3'
        },
        {
          id: 19,
          name: '小焦点模式100KV-1'
        },
        {
          id: 20,
          name: '小焦点模式100KV-2'
        },
        {
          id: 21,
          name: '小焦点模式100KV-3'
        },
        {
          id: 22,
          name: '小焦点模式120KV-1'
        },
        {
          id: 23,
          name: '小焦点模式120KV-2'
        },
        {
          id: 24,
          name: '小焦点模式120KV-3'
        }
      ],
      mklbid: 0,
      kv: 60.13,
      tgshow: true
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    mklbid: {
      handler(i, old) {
        if (old != 0) {
          this.$refs[`mkroi${old}`][0].$el.classList.remove('tymb')
        }
      },
      deep: true,
      immediate: true
    }
  },
  //方法集合
  methods: {
    focusfn(i) {
      this.$refs.kv.classList.remove('tymb')
      this.$refs[`mkroi${i}`][0].$el.classList.remove('tymb')
      this.$emit('tiptextfn', '')
    },
    tgfn() {
      const { mkroidata, mkroiAnswer } = this

      // 遍历所有输入框对应的编号（mkroidata中的项）
      mkroidata.slice(0, mkroiAnswer.length).forEach((item, index) => {
        const answer = mkroiAnswer[index]
        // 核心逻辑：跳过编号能被5整除的输入框（item是输入框编号，如5、10、15...）
        if (item % 5 === 0) {
          return
        }

        // 只给有有效答案的输入框赋值，并用$set确保响应式
        if (answer !== null && answer !== undefined) {
          this.$set(this.mkroi, item, answer) // 关键修复：使用$set保证响应式
          console.log(`编号为${item}的输入框已赋值：${answer}`)
        }
      })

      this.tgshow = false
      this.$refs.kv.classList.remove('tymb')
      this.$refs.mkroi1[0].$el.classList.remove('tymb')
      this.$refs.lbs1[0].classList.remove('tymbs')
      this.$emit('tiptextfn', '')
    },
    mklbfn(id) {
      this.mklbid = id
      this.$refs.kv.classList.add('tymb')
      this.$refs[`mkroi${id}`][0].$el.classList.add('tymb')
      this.$refs.lbs1[0].classList.remove('tymbs')
      // 正确示例：给组件根元素添加类

      // 或者给内部input元素添加类

      // 计算对应的组号（每3个id一组）
      const groupId = Math.floor((id - 1) / 3)

      // 计算在组内的位置（0-2）
      const positionInGroup = (id - 1) % 3

      // 计算在mkroiAnswer中的索引
      // 每组5个元素，只取前3个，所以每组起始索引是 groupId * 5
      const targetIndex = groupId * 5 + positionInGroup

      // 赋值（处理可能的索引越界）
      this.kv = this.mkroiAnswer[targetIndex] ?? null
    },
    mkcheckRoi() {
      let hasError = false
      const errorArr = []
      const { mkroidata, mkroiAnswer, mkroiError } = this // 解构赋值简化访问

      // 边界检查：答案数组长度不足时补充默认值
      if (mkroiAnswer.length < mkroidata.length) {
        console.warn(
          `答案数组长度不足，已自动补充默认值。实际: ${mkroiAnswer.length}, 需要: ${mkroidata.length}`
        )
        // 补充默认值避免后续undefined判断
        while (mkroiAnswer.length < mkroidata.length) {
          mkroiAnswer.push(null)
        }
      }

      // 校验所有输入项
      mkroidata.forEach((item, index) => {
        const answer = mkroiAnswer[index]
        // 跳过无答案的项
        if (answer === null || answer === undefined) return

        const inputValue = Number(this.mkroi[item])
        const isError = inputValue !== answer

        this.$set(mkroiError, index, isError)

        if (isError) {
          hasError = true
          errorArr.push(index)
        }
      })

      if (hasError) {
        this.mkroiErrorCount++
        // 错误提示闪烁效果
        setTimeout(() => {
          errorArr.forEach((idx) => this.$set(mkroiError, idx, false))
        }, 400)

        // 三次错误后自动填充正确答案并跳转
        if (this.mkroiErrorCount >= 3) {
          this.tgshow = false
          // 只填充有答案的项
          mkroidata.slice(0, mkroiAnswer.length).forEach((item, i) => {
            if (mkroiAnswer[i] !== null && mkroiAnswer[i] !== undefined) {
              this.mkroi[item] = mkroiAnswer[i]
            }
          })

          // 使用箭头函数简化定时器
          setTimeout(() => {
            this.$emit('jlsfn')
          }, 2000)
        }
      } else {
        this.mkroiErrorCount = 0
        this.$emit('jlsfn')
      }
      this.$refs.kv.classList.remove('tymb')
      this.$refs.mkroi1[0].$el.classList.remove('tymb')
      this.$refs.lbs1[0].classList.remove('tymbs')
      this.$emit('tiptextfn', '')
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$refs.lbs1[0].classList.add('tymbs')
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
::v-deep .mkroi1 {
  position: absolute !important;
  left: 176px;
  top: 110px;
  width: 56px !important;
  background: #eeeeee;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid rgba(196, 195, 195, 0.795);
  font-size: 13px;

  /* transparent */
}
::v-deep .mkroi1 .el-input__inner {
  height: 25px !important;
  border: none !important;
  border-radius: 0px;
  background-color: transparent;
  color: #000000 !important;
  padding: 0px !important;
  padding-left: 5px !important;
}
::v-deep .roi-error .el-input__inner {
  color: red !important;
}
.mkroi2 {
  left: 246px !important;
}
.mkroi3 {
  left: 316px !important;
}
.mkroi4 {
  left: 386px !important;
}
.mkroi5 {
  left: 456px !important;
}
.mkroi6 {
  left: 176px !important;
  top: 150px !important;
}
.mkroi7 {
  left: 246px !important;
  top: 150px !important;
}
.mkroi8 {
  left: 316px !important;
  top: 150px !important;
}
.mkroi9 {
  left: 386px !important;
  top: 150px !important;
}
.mkroi10 {
  left: 456px !important;
  top: 150px !important;
}
.mkroi11 {
  left: 176px !important;
  top: 191px !important;
}
.mkroi12 {
  left: 246px !important;
  top: 191px !important;
}
.mkroi13 {
  left: 316px !important;
  top: 191px !important;
}
.mkroi14 {
  left: 386px !important;
  top: 191px !important;
}
.mkroi15 {
  left: 456px !important;
  top: 191px !important;
}

.mkroi16 {
  left: 176px !important;
  top: 230.5px !important;
}
.mkroi17 {
  left: 246px !important;
  top: 230.5px !important;
}
.mkroi18 {
  left: 316px !important;
  top: 230.5px !important;
}
.mkroi19 {
  left: 386px !important;
  top: 230.5px !important;
}
.mkroi20 {
  left: 456px !important;
  top: 230.5px !important;
}
.mkroi21 {
  left: 176px !important;
  top: 270.5px !important;
}
.mkroi22 {
  left: 246px !important;
  top: 270.5px !important;
}
.mkroi23 {
  left: 316px !important;
  top: 270.5px !important;
}
.mkroi24 {
  left: 386px !important;
  top: 270.5px !important;
}
.mkroi25 {
  left: 456px !important;
  top: 270.5px !important;
}

.mkroi26 {
  left: 176px !important;
  top: 310.5px !important;
}
.mkroi27 {
  left: 246px !important;
  top: 310.5px !important;
}
.mkroi28 {
  left: 316px !important;
  top: 310.5px !important;
}
.mkroi29 {
  left: 386px !important;
  top: 310.5px !important;
}
.mkroi30 {
  left: 456px !important;
  top: 310.5px !important;
}
.mkroi31 {
  left: 176px !important;
  top: 350.5px !important;
}
.mkroi32 {
  left: 246px !important;
  top: 350.5px !important;
}
.mkroi33 {
  left: 316px !important;
  top: 350.5px !important;
}
.mkroi34 {
  left: 386px !important;
  top: 350.5px !important;
}
.mkroi35 {
  left: 456px !important;
  top: 350.5px !important;
}
.mkroi36 {
  left: 176px !important;
  top: 390.5px !important;
}
.mkroi37 {
  left: 246px !important;
  top: 390.5px !important;
}
.mkroi38 {
  left: 316px !important;
  top: 390.5px !important;
}
.mkroi39 {
  left: 386px !important;
  top: 390.5px !important;
}
.mkroi40 {
  left: 456px !important;
  top: 390.5px !important;
}
.liebox {
  position: absolute;
  width: 228px;
  height: 540px;
  top: 78px;
  left: 28px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.lieitem {
  width: 228px;
  height: 30px;
  background-color: #fff;
  display: flex;
  line-height: 30px;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 1px solid #cfcfcf;
}
.lieitems {
  background-color: #eff0f1;
}
.lieitemid {
  width: 31px;
  border-right: 1px solid #cfcfcf;
}
.lieitemname {
  padding-left: 10px;
  width: 180px;
}
.lieitemid {
  font-weight: 700;
  text-align: center;
}
.lieitemac {
  color: #ffff;
  background-color: #48abff;
}
.lbkv {
  font-size: 34px;
  width: 100px;
  height: 50px;
  position: absolute;
  left: 475px;
  top: 150px;
  text-align: center;
}
.tigbox {
  position: absolute;
  bottom: -40px;
}
.tigbox img {
  width: 140px;
  height: 53px;
}
</style>
